<template>
    <div>
        <div class="container">
            <ul class="list">
                <li v-for="(item,index) in list" :key="index" :class="{bgImg:appIndex==index,bgWhite:appIndex!=index}" @click="toggle(index)">{{item}}</li>
            </ul>
            <component :is="comp"></component> 
        </div>
    </div>
</template>
<script>
import xiaoguo from "./xiaoguo.vue";
import pingpai from "./pingpai.vue";
export default {
  data() {
    return {
      list: ["品牌类广告", "效果类广告"],
      appIndex: 0,
      comp: "pingpai"
    };
  },
  methods: {
    toggle(index) {
      this.appIndex = index;
      index == 0 ? (this.comp = "pingpai") : (this.comp = "xiaoguo");
    }
  },
  components: {
    xiaoguo,
    pingpai
  },
  mounted() {
    // 初始化控制样式
    if (this.$route.query.type) {
      if (this.$route.query.type == "APP品牌类") {
        this.appIndex = 0;
        this.comp = "pingpai";
      } else {
        this.appIndex = 1;
        this.comp = "xiaoguo";
      }
    } else {
      this.appIndex = 0;
    }
  }
};
</script>
<style scoped>
/* APP矩阵组件  */
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
}
.list {
  overflow: hidden;
}
.list > li {
  cursor: pointer;
  width: 50%;
  height: 40px;
  float: left;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
}
.list > li.bgImg {
  background: url("../../assets/img/APP矩阵详情页/切图通用/1.png");
  color: #fff;
}
.list > li.bgWhite {
  color: red;
  background: url("../../assets/img/APP矩阵详情页/切图通用/2.png");
  height: 30px;
  line-height: 30px;
}
</style>


